<template>
	<view class="makerOrder">
		<navBar isBack :backColor="backColor"  title="分销订单"  :color="color" :background="background"></navBar>
		<view class="mO_topImg" v-if="!isTop">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			<!-- 累计提成 -->
			<view class="mO_nowRatio">
				{{commission}}
				<view class="mO_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/zu.png" mode=""></image>
					累计提成
				</view>
			</view>
		</view>
		
		
		
		<!-- 选项按钮 -->
		<view class="big" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="mO_navBtn" :class="{'mO_navBtnTop':isTop}" :style="{top:phoneTop+'px'}">
				<view v-for="(item,index) in navBtn" :key="index" :class="navBtnIndex==index?'navBtn_active':''" @click="navBtnFn(index)">{{item}}</view>
			</view>
		</view>
		
		<!-- 所有 -->
		<!-- <view class="mO_allList" v-if="navBtnIndex==0">
			<view class="mO_refer">
				<view class="mO_referInfo">
					<image src="../../../static/distri/distriMoney/1.png" mode=""></image>
					<span>安琪拉</span>
					(推荐人)
				</view>
				<view>已付款</view>
			</view>
			<view class="mO_border"></view>
			
			商品信息列表
			<view class="mO_shopList">
				<view class="mO_shop">
					<image src="../../../static/distri/创客订单_slices/橱柜_淘宝搜索.png" mode=""></image>
					<view class="mO_shopInfo">
						<view class="mO_shopTitle omit-1">欧派橱柜定制北欧简约厨房芬迪整体柜</view>
						<view>3m地柜+3m台面（20mm） x1</view>
						<view class="mO_shopNeed">预计<span>+31.53</span></view>
					</view>
				</view>
				<view class="mO_shop">
					<image src="../../../static/distri/创客订单_slices/橱柜_淘宝搜索.png" mode=""></image>
					<view class="mO_shopInfo">
						<view class="mO_shopTitle omit-1">欧派橱柜定制北欧简约厨房芬迪整体柜</view>
						<view>3m地柜+3m台面（20mm） x1</view>
						<view class="mO_shopNeed">预计<span>+31.53</span></view>
					</view>
				</view>
				买家信息
				<view class="mO_userInfo">
					<view>买家昵称：明世隐</view>
					<view>订单编号：2345348728934279934</view>
					<view>下单时间：2021-2-20 10:23:49</view>
					<view class="mO_shopAllNeed">预计佣金：<span>+63.06</span></view>
				</view>
			</view>
		</view> -->
		
		
		<!-- 所有列表 -->
		<view class="fL_allList">
			<view class="fL_ListItem" v-for="(item,index) in orderList" :key="index">
				<!-- 用户信息 -->
				<view class="fL_userInfo">
					<view class="fL_userLeft">
						<view class="fL_userImg">
							<image :src="item.promoter_headimg" mode=""></image>
							<image :src="item.guideRankImg" mode=""></image>
						</view>
						{{item.promoter_realname}}
					</view>
					<!-- <span>{{item.create_time>0?'未付款':item.pay_time>0?'已付款':item.finish_time>0?'已完成':item.arrival_time>0?'可提现':''}}</span>--><!-- 订单状态 --> 
					<span v-if="item.arrival_time>0">可提现</span>
					<span v-else-if="item.finish_time>0">已完成</span>
					<span v-else-if="item.pay_time>0">已付款</span>
					<span v-else>未付款</span>
				</view>
				<!-- 订单信息 -->
				<view class="fL_orderInfo">
					<view class="fL_orderTop">
						<view>
							买家昵称
							<span>下单时间</span>
						</view>
						<view class="fontStyle">
							{{item.nickname}}
							<span>{{item.create_time}}</span>
						</view>
					</view>
					<view class="fL_orderBottom">
						订单类型
						<p class="fontStyle">{{item.type==1?'商城订单':item.type==2?'设计订单':item.type==3?'施工订单':''}}</p>
					</view>
				</view>
				<!-- 预计金额 -->
				<view class="fL_price">
					<!-- <view class="fL_priceLeft" v-if="btnIndex==4">
						<image src="../../../static/guide/联系.png" mode=""></image>
						联系导购
					</view> -->
					<view class="fL_priceRight">
						预计佣金 <span>¥ {{item.commission}}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="lastText">
			{{loadingText}}
		</view> -->
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js';
	export default{
		components:{
			navBar
		},
		data(){
			return{
				navBtn:['所有','未付款','已付款','已完成','可提现'],//按钮选项
				navBtnIndex:0,//按钮下标
				page:1,
				pagesize:10,
				orderList:[],
				isTop:false,
				color:'#fff',
				backColor:'#fff',
				background:'transparent',
				phoneTop:81,
				commission:null,  //累计提成
				navHeight:200,
			}
		},
		created() {
			this.phoneTop = this.$store.state.system.navBarHeight
			console.log(this.phoneTop)
		},
		onLoad(options) {
			this.navHeight = 470- Number(this.$store.state.system.navBarHeight)*2
			
			this.commission = options.commission
			this.getOrderList()
		},
		
		// 上滑状态
		onPageScroll(e) {
			// console.log(e)
			let that = this
			if(e.scrollTop>=100){
				that.isTop = true
				that.color = '#000'
				that.backColor = '#000'
				that.background = '#fff'
			}else if(e.scrollTop<50){
				that.isTop = false
				that.color = '#fff'
				that.backColor = '#fff'
				that.background = 'transparent'
			}
			// console.log(this.isTop)
		},
		
		//上拉加载更多
		onReachBottom() {
			this.page++
			uni.showLoading({
				title:'加载中'
			})
			service_distri.get_orderList({type:this.navBtnIndex,page:this.page,pagesize:this.pagesize}).then(res=>{
				console.log(res)
				if(res.code == 1){
					if(!res.data.list.length){
						uni.showToast({
							title:'没有更多了',
							icon:'none'
						})
						return false
					}
					res.data.list.map(item=>{item.create_time = this.$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd hh:mm:ss')})
					this.orderList = this.orderList.concat(res.data.list)
					console.log(this.orderList)
					setTimeout(function(){
						uni.hideLoading()
					},500)
				}
			})
		},
		methods:{
			// 获取创客订单列表
			getOrderList(){
				uni.showLoading({
					title:'加载中'
				})
				service_distri.get_orderList({type:this.navBtnIndex,page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res)
					if(res.code == 1){
						res.data.list.map(item=>{item.create_time = this.$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd hh:mm:ss')})
						this.orderList = res.data.list?res.data.list:[],
						console.log(this.orderList)
						setTimeout(function(){
							uni.hideLoading()
						},500)
					}
				})
			},
			
			// 选择按钮
			navBtnFn(index){
				this.navBtnIndex=index
				this.page = 1
				this.getOrderList()
			}
				
		}
	}
</script>

<style lang="scss" scoped>
	// .big{
	// 	position: fixed;
	// 		left: 0;
	// 		right: 0;
	// 		top: 96rpx;
	// }
	.makerOrder{
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.mO_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 累计佣金
		.mO_nowRatio{
			position: absolute;
			z-index: 2;
			left: 0;
			padding-left: 28rpx;
			bottom: 60rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.mO_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		// 选项按钮
		.mO_navBtn{
			margin: 0 0 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: #fff;
			padding: 20rpx 20rpx;
			view{
				width: 140rpx;
				height: 56rpx;
				border-radius: 28rpx;
				text-align: center;
				font:600 26rpx/56rpx PingFang SC;
			}
			// 按钮激活样式
			.navBtn_active{
				background-color: #CBAF87;
				color: #fff;
			}
		}
		.mO_navBtnTop{
			background-color: #fff;
			position: fixed;
			margin: 0;
			height: 96rpx;
			left: 0;
			z-index: 503;
			
		}
		
		// //所有选项列表
		// .mO_allList{
		// 	width: 702rpx;
		// 	padding-bottom: 40rpx;
		// 	background-color: #fff;
		// 	margin: 0 auto 24rpx;
		// 	border-radius: 16rpx;
		// 	.mO_refer{
		// 		display: flex;
		// 		align-items: center;
		// 		width: 100%;
		// 		height: 88rpx;
		// 		justify-content: space-between;
		// 		font:500 24rpx/36rpx PingFang SC;
		// 		color: #DBA954;
		// 		padding: 0 28rpx 0 24rpx;
		// 		.mO_referInfo{
		// 			display: flex;
		// 			align-items: center;
		// 			color: #A0A0A0;
		// 			image{width: 40rpx;height: 40rpx;}
		// 			span{color: #0A0605;margin: 0 8rpx 0 16rpx;font-weight:600;}
		// 		}
		// 	}
		// 	.mO_border{
		// 		width: 100%;
		// 		height: 0;
		// 		border: 2rpx solid #F8F8F8;
		// 	}
		// 	.mO_shopList{
		// 		padding: 0rpx 28rpx 0rpx 24rpx;
		// 		.mO_shop{
		// 			display: flex;
		// 			justify-content: space-between;
		// 			image{width: 128rpx;height: 128rpx;}
		// 			border-bottom: 4rpx solid #F8F8F8;
		// 			padding: 28rpx 0rpx 28rpx 0rpx;
		// 			color: #A0A0A0;
		// 			.mO_shopInfo{
		// 				display: flex;
		// 				flex-direction: column;
		// 				font: 400 24rpx/36rpx PingFang SC;
		// 				.mO_shopTitle{
		// 					width: 496rpx;
		// 					font: 600 26rpx/40rpx PingFang SC;
		// 					color: #505050;
		// 				}
		// 				.mO_shopNeed{
		// 					margin-top: 18rpx;
		// 					span{font-weight: 600;color: #FA4E37;margin-left: 16rpx;}
		// 					margin-left: auto;
		// 				}
		// 			}
		// 		}
		// 		.mO_userInfo{
		// 			margin-top: 24rpx;
		// 			display: flex;
		// 			flex-direction: column;
		// 			font: 500 24rpx/36rpx PingFang SC;
		// 			color: #A0A0A0;
		// 			view{margin-top: 16rpx;}
		// 			.mO_shopAllNeed{
		// 				font: 600 28rpx/40rpx PingFang SC;
		// 				color: #0A0605;
		// 				span{color: #FA4E37;}
		// 				margin-top: 40rpx;
		// 				margin-left: auto;
		// 				span{margin-left: 8rpx;}
		// 			}
		// 		}
		// 	}
		// }
		
		//所有列表
		.fL_allList{
			width: 100%;
			margin-top: 40rpx;
			.fL_ListItem{
				width: 702rpx;
				height: 510rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin: 0 auto 24rpx;
				padding: 40rpx 28rpx 28rpx 24rpx;
				.fL_userInfo{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fL_userLeft{
						display: flex;
						align-items: center;
						font: 500 26rpx/40rpx PingFang SC;
						color: #0A0605;
						.fL_userImg{
							margin-right: 20rpx;
							position: relative;
							image{width: 84rpx;height: 84rpx;border-radius: 50%;}
							image:nth-child(2){position: absolute; bottom: 0;right: 0;  width: 28rpx;height: 28rpx;}
						}
						
					}
					span{
						font: 400 22rpx/36rpx PingFang SC;
						color: #DBA954;
					}
				}
				.fL_orderInfo{
					width: 654rpx;
					height: 248rpx;
					background-color: #F8F8F8;
					margin: 28rpx 0 40rpx 0;
					padding: 28rpx;
					font: 400 22rpx/36rpx PingFang SC;
					color: #A0A0A0;
					display: flex;
					// text-align: right;
					flex-direction: column;
					justify-content: space-between;
					.fontStyle{font: 400 26rpx/40rpx PingFang SC;color: #505050;}
					.fL_orderTop{
						view{display: flex;justify-content: space-between;}
					}
					.fL_orderBottom{margin-right: auto;}
				}
				.fL_price{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.fL_priceLeft{
						width: 184rpx;
						height: 64rpx;
						border: 2rpx solid #505050;
						border-radius: 32rpx;
						display: flex;
						align-items: center;
						
						font: 400 26rpx/40rpx PingFang SC;
						color: #505050;
						image{
							width: 32rpx;
							height: 32rpx;
							margin: 0 12rpx;
						}
					}
					.fL_priceRight{
						margin-left: auto;
						font: 400 22rpx/36rpx PingFang SC;
						color: #0A0605;
						span{ margin-left: 16rpx; font: 500 30rpx/36rpx PingFang SC;color: #FA4E37;}
					}
				}
			}
		}
		
		
		
	}
</style>
